/* 公共样式文件 */

/* 重置样式 */
* {
	box-sizing: border-box;
}

page {
	background-color: #f5f5f5;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* 通用工具类 */
.flex {
	display: flex;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

/* 边距工具类 */
.m-0 { margin: 0; }
.m-10 { margin: 10rpx; }
.m-20 { margin: 20rpx; }
.m-30 { margin: 30rpx; }

.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10rpx; }
.mt-20 { margin-top: 20rpx; }
.mt-30 { margin-top: 30rpx; }

.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10rpx; }
.mb-20 { margin-bottom: 20rpx; }
.mb-30 { margin-bottom: 30rpx; }

.p-0 { padding: 0; }
.p-10 { padding: 10rpx; }
.p-20 { padding: 20rpx; }
.p-30 { padding: 30rpx; }

/* 颜色工具类 */
.text-primary { color: #667eea; }
.text-success { color: #28a745; }
.text-warning { color: #ffc107; }
.text-danger { color: #dc3545; }
.text-info { color: #17a2b8; }
.text-muted { color: #6c757d; }

.bg-primary { background-color: #667eea; }
.bg-success { background-color: #28a745; }
.bg-warning { background-color: #ffc107; }
.bg-danger { background-color: #dc3545; }
.bg-info { background-color: #17a2b8; }
.bg-light { background-color: #f8f9fa; }
.bg-white { background-color: #ffffff; }

/* 按钮样式 */
.btn {
	display: inline-block;
	padding: 20rpx 40rpx;
	border-radius: 10rpx;
	border: none;
	font-size: 28rpx;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-primary {
	background-color: #667eea;
	color: #ffffff;
}

.btn-success {
	background-color: #28a745;
	color: #ffffff;
}

.btn-warning {
	background-color: #ffc107;
	color: #212529;
}

.btn-danger {
	background-color: #dc3545;
	color: #ffffff;
}

/* 卡片样式 */
.card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 分割线 */
.divider {
	height: 2rpx;
	background-color: #e9ecef;
	margin: 30rpx 0;
}

/* 加载动画 */
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #f3f3f3;
	border-top: 4rpx solid #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}